<!-- 编辑弹窗 -->
<template>
  <ele-modal
    inner
    width="80%"
    :visible="visible"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="'销售订单列表'"
    @update:visible="updateVisible"
  >
    <div class="ele-body">
      <!-- 搜索表单 -->
      <saleorderListSearch @search="reload"  />
      <el-card>   
        <ele-pro-table ref="table"  row-key="id" :row-class-name="tableRowClassName" :columns="orderRecColumns"  :datasource="datasource"   @done="onDone" :need-page="true" @current-change="handlecurrentchange"  @row-click="singleElection" @row-dblclick="dbclick"  :height="tableHeight" :full-height="tableFullHeight">
         <!-- 操作列 -->
          <template slot="checkaction" slot-scope="{ row }"  >
            <el-radio v-model="templateSelection" :label="row.index"><span></span></el-radio>
          </template>
          <template slot="batchNo" slot-scope="{ row }">
            <el-select collapse-tags filterable multiple v-model="row.checkbatchNoItems" class="ele-fluid" >
              <el-option v-for="item in row.batchNoItems" :key="item" :label="item" :value="item" />
            </el-select>
          </template>
        </ele-pro-table>
      </el-card>
    </div>
    <div slot="footer">
      <el-button type="primary" :loading="loading" @click="save" >
        确定
      </el-button>
    </div>
  </ele-modal>
</template>

<script>
  
  import saleorderListSearch from './saleorder-list-search.vue';
  import { ChooseSaleorder } from '@/api/businesshandling/saleoutmanger';
  import { QuerySaleorderBatchNoByCondition } from '@/api/businesshandling/saleordermanager';

  export default {
    name: 'SaleoutOrderList',
    components: {saleorderListSearch},
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
    },
    data() {
      return {
        fixedHeight:true,
        templateSelection: '',
        // 表单数据
        form: {},
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        //当前选中行
        currentRow:{},
        qtyTotal : 0,
        amountTotal : 0,
        totalAmountTotal : 0,
        transportAmoutTotal : 0,
        // 表格列配置
        orderRecColumns: [
          {prop: 'checkaction',label: '选择', width: 50, slot: 'checkaction', fixed: 'left',},
          {prop: 'orderNo', label: '订单号',showOverflowTooltip: true,align: 'center',},
          {prop: 'batchNo', label: '批次号',showOverflowTooltip: true,slot:'batchNo', align: 'center',},
          {prop: 'customerName', label: '客户名称',  showOverflowTooltip: true, align: 'center', },
          {prop: 'orderAmount', label: '订单金额',showOverflowTooltip: true, align: 'center',},
          {prop: 'currencyDesc', label: '币种',width: 80,showOverflowTooltip: true,align: 'center',},
          {prop: 'rate', label: '汇率', showOverflowTooltip: true, align: 'center',},
          {
            prop: 'orderDate', label: '订单日期', showOverflowTooltip: true, align: 'center',
            formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
          },
        ],
      };
    },

    computed: {
      // 表格高度
      tableHeight() {
        var fh = this.fixedHeight ? 'calc(100vh - 480px)' : void 0;
        return fh;
      },
      // 表格全屏时高度
      tableFullHeight() {
        var fh =  this.fixedHeight ? 'calc(100vh - 380px)' : null;
        return fh;
      },
    },
    methods: {
      
      /* 表格数据源 */
      async datasource(params) {
        
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        if(!params.where.conditions) params.where.conditions = [];
        params.where.conditions.push({ key:"status",operator: 0,value: 1,});
        params.where.conditions.push({ key:"outStatus",operator: 6,value: '1,3'})
        params.where.conditions.push({ key:"deleted",operator: 0,value: 0,})
        

        let data = await QuerySaleorderBatchNoByCondition(params.where);

        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
        return {
            list:data.items,
            count:data.totalrecords,
        };
      },

      save(){
        
        if(this.currentRow && this.currentRow.id){
          if(this.currentRow.checkbatchNoItems && this.currentRow.checkbatchNoItems.length>0){
            let param = {orderId:'',batchNoItems:[]};
            param.orderId = this.currentRow.id;
            param.batchNoItems=this.currentRow.checkbatchNoItems;
            
            ChooseSaleorder(param).then((d)=>{
              this.$emit('callback',d);
              this.$emit('update:visible', false);
            });
          }else{
            this.$message({
              message: '没有选择批次号',
              type: 'warning'
            });
          }
        }else{
          this.$message({
            message: '没有选择销售订单',
            type: 'warning'
          });
        }
      },

      //获取选择行索引
      tableRowClassName({row,rowIndex}){
        row.index = rowIndex;
      },

      //设置选中行索引
      singleElection (row) {
        this.templateSelection = row.index;
      },

      dbclick(row,column,event){
        this.templateSelection = row.index;
        this.save();
      },
      /* 选择行数据 */
      handlecurrentchange(currentrow,oldrow){
        this.currentRow = currentrow;
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {

      },
      /* 刷新表格 */
      reload(where) {
        if(this.$refs.table){
          this.$refs.table.reload({ where: where });
        }
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
      },

    },
    /* 监听visible属性变化 */
    watch: {
      visible(visible) {
        this.templateSelection='';
        if(this.$refs.table){
            this.reload();
          }
      }
    }
  };
</script>
<style scoped>

  
  </style>